<template>
    <div style="background: #F0F1F2; height: 100vh;">
      <van-row>
        <van-col span="24" id="header">
          <van-row gutter="20" style="margin-top:60px;">
            <van-col id="imgCol" span="8">
              <img
                  width="70"
                  height="70"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </van-col>
            <van-col span="8">
              <div class="Title">
                <p style="font-size: 18px;">Herther</p>
                <p style="font-size: 16px;">ID:65896546</p>
              </div>
            </van-col>
            <van-col span="8" style="text-align: center;">
              <van-icon size="24" color="#737373" style="margin-top: 40px;" name="arrow" />
            </van-col>
          </van-row>
        </van-col>

        <van-col span="24" id="listCol" v-for="item in list">
          <van-row gutter="15">
            <van-col span="3" id="IconCol">
                <van-icon id="Icon" :color="item.color" size="24" :name="item.icon" />
            </van-col>
            <van-col span="6" id="title">
                <p style="">{{ item.name }}</p>
            </van-col>
            <van-col span="15">
              <van-icon size="24" id="arrow" color="#737373"  name="arrow" />
            </van-col>
          </van-row>
        </van-col>



      </van-row>
    </div>
</template>

<script>


export default {
  name: "info",
  data(){
    return{
      list:[
        {name:"缴费",icon:"diamond",color:"#1E90FF"},
        {name:"报修",icon:"lock",color:"#FFA94D"},
        {name:"水电",icon:"fire",color:"#2ecc71"},
        {name:"信息",icon:"smile-comment",color:"#e74c3c"},
        {name:"设置",icon:"setting",color:"#34495e"}
      ]
    }
  },
  components:{
  }
}
</script>

<style scoped>
    #arrow{
      margin-left: 154px;
      margin-top: 13px;
    }
    #title{
      height: 50px;
    }
    #title p{
      line-height: 13px;
      font-size: 18px;
      margin-left: 8px;
      color: black;
    }
    #Icon{
      margin-left: 20px;
      margin-top: 13px;
    }
    #IconCol{
      height: 50px
    }
    #listCol{
      background: white;
      height: 50px;
      margin-top: 20px;
    }
    #imgCol{
      height: 100px;
    }
    #imgCol img{
      margin-top: 18px;
      margin-left: 23px;
      border-radius: 13px;
    }
    #header{
      height: 200px;
      background: white;
    }
    .Title{
      margin-top: 35px;
    }
    .Title p{
        line-height: 10px;
    }
</style>